<template>
  <div class="withdrawDetail">
    <ComNavBar :title="t('Withdrawal Details')" />

    <div class="container">
      <div class="head">
        <div class="balance">{{t('Withdrawal Amount')}}</div>
        <div class="num"><span v-if="detail.amount">₹</span>{{ decimalpre(detail.amount) }}</div>
        <div class="succeed-icon"><span>{{ detail.status }}</span></div>
      </div>
      <div class="username van-cell">
        <div class="van-cell__title"><span>{{t('Username')}}</span></div>
        <div class="van-cell__value"><span>{{ detail.username }}</span></div>
      </div>
      <div class="van-cell">
        <div class="van-cell__title"><span>{{t('Bank Name')}}</span></div>
        <div class="van-cell__value"><span>{{ detail.name }}</span></div>
      </div>
      <div class="van-cell">
        <div class="van-cell__title"><span>{{t('Bank Account Number')}}</span></div>
        <div class="van-cell__value"><span>{{ detail.code }}</span></div>
      </div>
      <div class="van-cell">
        <div class="van-cell__title"><span>{{t('Bank Account Name')}}</span></div>
        <div class="van-cell__value"><span>{{ detail.owner }}</span></div>
      </div>
      <div class="van-cell">
        <div class="van-cell__title"><span>{{t('Status')}}</span></div>
        <div class="van-cell__value"><span>{{ detail.status }}</span></div>
      </div>
      <div class="van-cell">
        <div class="van-cell__title"><span>{{t('Bank Service Fee')}}</span></div>
        <div class="van-cell__value"><span>{{ detail.service_fee }}</span></div>
      </div>
      <div class="van-cell">
        <div class="van-cell__title"><span>{{t('Withdrawal Time')}}</span></div>
        <div class="van-cell__value"><span>{{ date(detail.create_datetime) }}</span></div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref, onBeforeMount } from 'vue'
import { useRoute } from 'vue-router'
import { decimalpre, date } from '@/utils/util'
import { get } from '@/utils/request'
import { t } from '@/languages'
const detail = ref({})

const $route = useRoute()

async function queryDetail() {
  const id = $route.query.id

  try {
    const res = await get(`/api/app/withdraw/${id}/`, {})

    detail.value = res

  } catch (error) {
    console.log(error)
  }
}

onBeforeMount(queryDetail)
</script>
<style lang="scss" scoped>
.withdrawDetail .head {
  margin: .53333rem .53333rem;
  background: url(@/assets/images/Deposit-Records1_03.png);
  background-size: 100% 100%;
  height: 17vh;
}

.withdrawDetail .balance{
  margin-top: .53333rem;
  text-align: center;
  font-size: .37333rem;
  padding: .26667rem 0;
}

.withdrawDetail .num {
  color: #62f8a2;
  text-align: center;
  font-size: .58667rem;
}

.withdrawDetail .succeed-icon {
  padding-top: .26667rem;
  text-align: center;
}

.van-cell {
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  box-sizing: border-box;
  width: 100%;
  padding: .26667rem .42667rem;
  overflow: hidden;
  color: #323233;
  font-size: .37333rem;
  line-height: .64rem;
  background-color: unset;
}

.van-cell:after {
  position: absolute;
  box-sizing: border-box;
  content: " ";
  pointer-events: none;
  right: .42667rem;
  bottom: 0;
  left: .42667rem;
  border-bottom: .02667rem solid #ebedf0;
  -webkit-transform: scaleY(.5);
  transform: scaleY(.5);
}

.van-cell__title {
  color: #fff;
  flex: 1.2;
}

.van-cell__value {
  position: relative;
  overflow: hidden;
  color: #fff;
  text-align: right;
  vertical-align: middle;
  word-wrap: break-word;
}

.withdrawDetail .username .van-cell__value {
  color: #62f8a2;
}
</style>
